<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>获取鼠标在窗口客户区中的坐标</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        .snake{
            width: 25px;
            height: 25px;
            position: absolute;
        }
        .food{
            width: 25px;
            height: 25px;
            background: #fbfcfc;
            position: absolute;
        }
    </style>
</head>
<body>
<!--导入模板中的头部导航栏-->
<div th:replace="~{common::topbar(active='test')}"></div>
<div class="container">
    <div id="gameRooms"></div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 1200px ; max-height: 1000px">
            <div class="modal-content" style="border: 0px">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        开始对战
                    </h4>
                </div>
                <div class="modal-body" style="padding: 0px">
                    <div th:replace="~{common::gameView}"></div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div id="food" class="food" style="left: 25px;bottom: 25px;"></div>
</div>

<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/keypress.js}"></script>
<script th:inline="javascript">
    var listener = new window.keypress.Listener();
    listener.simple_combo("s", function() {
        console.log("You pressed shift and s");
        sendmsg("s");
    });
    listener.simple_combo("a", function() {
        console.log("You pressed shift and a");
        sendmsg("a");
    });
    listener.simple_combo("w", function() {
        console.log("You pressed shift and w");
        sendmsg("w");
    });
    listener.simple_combo("d", function() {
        console.log("You pressed shift and d");
        sendmsg("d");
    });
    //上来加载游戏大厅
    $(document).ready(function(){
        $.ajax({
            type:"GET",
            url: "getGameRoom",
            success: function(data) {
                console.log(data)
                //后端处理模板引擎，将抽取出的模板填充数据，并循环，然后在这里将处理好的html语言加入到对应的页面中！！！！！
                //这里是重点！！！！！！
                $("#gameRooms").html(data);
            }
        });
    })
    setInterval(keepAlive, 10000);
    var color = ["#ffdf7e","#1c7430","#fbfcfc"];
    // 声明元素
    var ws = new WebSocket("ws://81.68.195.172:8088/game");
    // ws连接成功事件
    ws.onopen = function(evt) {
        console.log("Connection open ...");
        // 连接成功之后发送确认身份信息
        var sendmsg = {
            "msgType":0,
            "accountId":[[${session.accountId}]],
        }
        var msg = JSON.stringify(sendmsg);
        ws.send(msg);
        alert("登录成功")
    };
    // ws收到消息事件
    ws.onmessage = function(evt) {
        //解析收到的json内容，判断发送者和发送内容
        // console.log("Received Message: " + evt.data);
        var msgObj = JSON.parse(evt.data);
        switch (msgObj.msgType) {
            case 6:
                // 处理游戏数据
                var gameData = JSON.parse(msgObj.msgInfo);
                // 循环发来的list，这个时候可以清空游戏界面了
                $("#gameViewing").html('')
                var gameViewing = document.getElementById('gameViewing');
                for (let i = 0; i < gameData.length; i++) {
                    for (let j = 0; j < gameData[i].lenth; j++) {
                        var x = gameData[i].snakeX[j]
                        var y = gameData[i].snakeY[j];
                        // 游戏界面追加html语言，其实就是色块
                        var insertHtml = ""
                        insertHtml += '<div class="snake"'
                        insertHtml += 'style="left: '
                        insertHtml += x
                        insertHtml += 'px;bottom: '
                        insertHtml += y
                        insertHtml += 'px;'
                        insertHtml += 'background: '
                        insertHtml += color[i]
                        insertHtml += ' "></div>'
                        gameViewing.insertAdjacentHTML('beforeend',insertHtml)
                    }
                }
                break
            case 7:
                var gameData = JSON.parse(msgObj.msgInfo);
                var gameViewing = document.getElementById('gameViewing');
                var insertHtml = ""
                insertHtml+='<div id="food" class="food" style="left:'
                insertHtml+=gameData[0]
                insertHtml+='px;bottom: '
                insertHtml+=gameData[1]
                insertHtml+='px;"></div>'
                gameViewing.insertAdjacentHTML('beforeend',insertHtml)
                console.log(gameData)
                break
            case 5:
                console.log(msgObj)
                break
            default:
                break
        }
    };
    // ws关闭事件
    ws.onclose = function(evt) {
        console.log("Connection closed.");
        alert("您已断开连接，请刷新")
    };
    function keepAlive(){
        var sendmsg = {
            "msgType":5,
            "msgInfo":"ping"
        }
        var msg = JSON.stringify(sendmsg);
        ws.send(msg);
    }

    function joinRoom(){
        $.ajax({
            type:"GET",
            url: "joinRoom",
            success: function(data) {
                console.log(data)
            }
        });
    }

    function sendmsg(userDir) {
        var sendmsg = {
            "msgType":2,
            "accountId":[[${session.accountId}]],
            "msgInfo":userDir
        }
        var msg = JSON.stringify(sendmsg);
        ws.send(msg);
    }
</script>
</body>
</html>